<!DOCTYPE HTML>
<html style="min-height:100%;">
<head>
    <title>Tor态势感知</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="/images/favicon.ico" type="image/x-icon" rel="shortcut icon">

    <!-- yes, we are handheld friendly :) -->
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <!-- icons for mobile devices -->
    <link rel="apple-touch-icon" href="/images/apple-touch-icon-152x152.png">
    <link rel="shortcut icon" href="/images/android-icon.png" sizes="196x196">
    <!-- jQuery -->
    <script type="text/javascript" src="/js/jquery.min.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>

    <!-- Fonts -->
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <link rel="stylesheet" href="/fonts/source-sans-pro.css">

    <!-- Prism -->
    <link rel="stylesheet" href="/css/prism.css">
    <script type="text/javascript" src="/js/prism.js"></script>

    <!-- custom styles and javascript -->
    <link rel="stylesheet" href="/css/style.css">
    <script type="text/javascript" src="/js/script.js"></script>
    <!-- layer -->
    <script type="text/javascript" src="/layer/layer.js"></script>
    <!-- common.js -->
    <script type="text/javascript" src="/js/common.js"></script>
    <!-- echarts.js -->
    <script type="text/javascript" src="/js/echarts.common.js"></script>
    <script type="text/javascript" src="/js/macarons.js"></script>
    <script type="text/javascript" src="/js/shine.js"></script>

</head>

<body class="noscript" style="">

<!-- Using evil inline stylesheets to hide the FOUC for slow connections... -->

<div id="wrapper" style="display:none;">

    <!-- backToTop-Button and Anchor -->
    <noscript>
        <div class="topButton" style="display:block;"><a href="#top"><i class="fa fa-chevron-up" aria-hidden="true"></i></a>
        </div>
    </noscript>
    <script type="text/javascript">
        document.write('<div class="topButton" style="display:none;"><a href="#top"><i class="fa fa-chevron-up" aria-hidden="true"></i></a></div>');
    </script>
    <a id="top"></a>

    <!-- secondary navigation -->
    <nav class="navbar navbar-default navbar-secondary">
        <div class="container-fluid">
            <input type="checkbox" id="navbar-toggle-checkbox">
            <div class="navbar-header">
                <label for="navbar-toggle-checkbox" type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                       data-target="#bs-example-navbar-secondary" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </label>
                <a class="navbar-brand visible-xs" href="/"><img src="/images/tor-metrics-white.png" width="232"
                                                                 height="50" alt="Tor Metrics"></a>
            </div>
        </div><!-- /.container-fluid -->
    </nav>
    <!-- /secondary navigation -->

    <!-- page header for every single page -->
    <div class="page-header hidden-xs">
        <a href="/"><img src="/images/tor-metrics-white@2x.png" width="232" height="50" alt="Tor Metrics"
                         id="metrics-wordmark"></a>
        <div class="clearfix"></div>
    </div>
    <!-- /page header -->

    <!-- primary navigation -->
    <nav class="navbar navbar-default hidden-xs">
        <div class="container-fluid">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-primary">
                <ul class="nav navbar-nav">
                    <li><a href="/"><i class="" aria-hidden="true"></i> Home</a></li>

                    <li class=" active"><a href="/userstats-bridge-transport.html"><i class="" aria-hidden="true"></i>
                        用户信息&nbsp;&nbsp;&nbsp;&nbsp;</a></li>

                    <li class=""><a href="/servers.html"><i class="" aria-hidden="true"></i> 服务器信息&nbsp;&nbsp;&nbsp;&nbsp;</a></li>

                    <li class=""><a href="/traffic.html"><i class="" aria-hidden="true"></i> 流量信息&nbsp;&nbsp;&nbsp;&nbsp;</a></li>


                    <li class=""><a href="/torperf.html"><i class="" aria-hidden="true"></i> 性能&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    </li>

                    <li class=""><a href="/hidserv-dir-onions-seen.html"><i class="" aria-hidden="true"></i> 洋葱服务&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    </li>



                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <!-- /primary navigation -->


    <div class="container">
        <ul class="breadcrumb">
            <li><a href="/">Home</a></li>
            <li class="active">用户信息</li>
        </ul>
    </div>

    <div class="container">
        <p>通过客户端对中继以及网桥节点发送的请求，预估用户数量</p>
    </div>

    <div class="container">

        <!-- tabs -->
        <ul class="nav nav-tabs">

            <li role="presentation"><a href="relay-country.html" data-tab="userstats-relay-country">中继用户</a></li>

            <li role="presentation"><a href="userstats-bridge-country.html" data-tab="userstats-bridge-country">桥节点用户（国家）</a></li>

            <li role="presentation" class="active"><a href="userstats-bridge-transport.html" data-tab="userstats-bridge-transport">桥节点用户（混淆方式）</a></li>

            <li role="presentation"><a href="userstats-bridge-combined.html" data-tab="userstats-bridge-combined">桥节点用户（国家与混淆方式）</a></li>

            <li role="presentation"><a href="userstats-bridge-version.html" data-tab="userstats-bridge-version">桥节点用户（IP版本）</a></li>

            <li role="presentation"><a href="bridgedb-transport.html" data-tab="bridgedb-transport">BridgeDB请求（混淆方式）</a></li>

            <li role="presentation"><a href="bridgedb-distributor.html" data-tab="bridgedb-distributor">BridgeDB请求（分发商）</a></li>

            <li role="presentation"><a href="userstats-relay-table.html" data-tab="userstats-relay-table">中继用户Top国家和地区</a></li>

            <li role="presentation"><a href="userstats-bridge-table.html" data-tab="userstats-bridge-table">网桥用户Top国家和地区</a></li>


        </ul>

        <!-- tab-content -->
        <div class="tab-content">
            <div class="tab-pane active" id="tab-">

                <div class="row">
                    <div class="col-md-8">

                        <div id="main" style="width: 800px; height: 600px;"></div>

                    </div>

                    <div class="col-md-4">

                        <form id="form1" onsubmit="return false" action="##" method="get">
                            <p>
                                <label for="start">Start date:</label>
                                <input type="date" name="start" size="10" value="2020-02-04" placeholder="yyyy-mm-dd"
                                       id="start">
                            </p>
                            <p>
                                <label for="end">End date:</label>
                                <input type="date" name="end" size="10" value="2020-05-04" placeholder="yyyy-mm-dd"
                                       id="end">
                            </p>
                            <p>
                                <input class="submit" type="button" value="更新图像" onclick="getData()">
                            </p>
                        </form>

                    </div><!-- col-md-4 -->
                </div><!-- row -->
            </div><!-- tab-pane -->
        </div><!-- tab-content -->
    </div><!-- container -->

    <div class="container-fluid" id="footer">

        <div class="container no-gutter">
            <div class="col-xs-6">
                <p>
                    &copy; 2009&ndash;2018 <a href="https://www.torproject.org/" target="_blank">The Tor Project</a>
                </p>
            </div>
            <div class="col-xs-6">
                <p class="pull-right">

                    <a href="/about.html#contact">Contact</a>

                </p>
            </div>
        </div>

        <div class="container small">

            <p>This material is supported in part by the National Science Foundation
                under Grant No. CNS-0959138. Any opinions, finding, and conclusions or
                recommendations expressed in this material are those of the author(s) and do not
                necessarily reflect the views of the National Science Foundation. "Tor" and the
                "Onion Logo" are <a href="https://www.torproject.org/docs/trademark-faq.html.en"
                                    target="_blank">registered trademarks</a> of The Tor Project, Inc.. Data on this
                site is freely available under a <a
                        href="https://creativecommons.org/publicdomain/zero/1.0/" target="_blank">CC0 no
                    copyright declaration</a>: To the extent possible under law, the Tor Project has
                waived all copyright and related or neighboring rights in the data. Graphs are
                licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/"
                                    target="_blank">Creative Commons Attribution 3.0 United States License</a>.</p>

        </div>

    </div><!-- /footer -->

</div><!-- /wrapper -->

</body>
</html>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), 'macarons');

    // 新建productName与nums数组来接受数据，因为我们
    var date = [];
    var all_PT = [];
    var obfs2 = [];
    var obfs3 = [];
    var obfs4 = [];
    var websocket = [];
    var fte = [];
    var meek = [];
    var scramblesuit = [];
    var snowflake = [];
    var defaultOP = [];
    //AJAX接收数据主体
    $.ajax({
        type: "GET",
        url: "/users/bridge_transport_default",
        dataType: "json",
        data: {},
        async: false,
        success: function (result) {
            if (result.code == 0) {
                date = result.data[0];
                all_PT = result.data[1];
                obfs2 = result.data[2];
                obfs3 = result.data[3];
                obfs4 = result.data[4];
                websocket = result.data[5];
                fte = result.data[6];
                meek = result.data[7];
                scramblesuit = result.data[8];
                snowflake = result.data[9];
                defaultOP = result.data[10];
            } else {
                layer.msg(result.msg);
            }
        },
        error: function () {
            layer.msg("获取后台数据失败！");
        }
    });

    //指定图表的配置项和数据
    var option = {
        title: {
            text: '网桥混淆插件用户变化图'
        },
        tooltip: {},
        legend: {
            data: ['PT总用户', 'obfs2', 'obfs3', 'obfs4', 'websocket', 'fte', 'meek', 'scramblesuit', 'snowflake', 'defaultOP']
        },
        xAxis: {
            //结合
            data: date
        },

        yAxis: {},
        series: [{
            name: 'PT总用户',
            type: 'line',
            data: all_PT
        }, {
            name: 'obfs2',
            type: 'line',
            data: obfs2
        }, {
            name: 'obfs3',
            type: 'line',
            data: obfs3
        }, {
            name: 'obfs4',
            type: 'line',
            data: obfs4
        }, {
            name: 'websocket',
            type: 'line',
            data: websocket
        }, {
            name: 'fte',
            type: 'line',
            data: fte
        }, {
            name: 'meek',
            type: 'line',
            data: meek
        }, {
            name: 'scramblesuit',
            type: 'line',
            data: scramblesuit
        }, {
            name: 'snowflake',
            type: 'line',
            data: snowflake
        }, {
            name: 'defaultOP',
            type: 'line',
            data: defaultOP
        }],
        dataZoom: [
            {
                type: 'inside',// 内置于坐标系中
                xAxisIndex: [0]
            },
            {
                type: 'slider',//有单独的滑动条，用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示
                show: true,//是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
                start: 0,//数据窗口范围的起始百分比0-100
                end: 50,//数据窗口范围的结束百分比0-100
                xAxisIndex: [0],// 此处表示控制第一个xAxis，设置 dataZoom-slider 组件控制的 x轴 可是已数组[0,2]表示控制第一，三个；xAxisIndex: 2 ，表示控制第二个。yAxisIndex属性同理
                bottom: -10 //距离底部的距离
            }
        ],
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {
                    show: true,
                    excludeComponents: ['toolbox'],
                    pixelRatio: 2
                }
            }
        }
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>


<script type="text/javascript">
    function getData() {
        // 基于准备好的dom，初始化echarts实例
        var date = [];
        var all_PT = [];
        var obfs2 = [];
        var obfs3 = [];
        var obfs4 = [];
        var websocket = [];
        var fte = [];
        var meek = [];
        var scramblesuit = [];
        var snowflake = [];
        var defaultOP = [];
        //AJAX接收数据主体
        $.ajax({
            type: "GET",
            url: "/users/bridge_transport",
            dataType: "json",
            data: $('#form1').serialize(),
            async: false,
            success: function (result) {
                if (result.code == 0) {
                    date = result.data[0];
                    all_PT = result.data[1];
                    obfs2 = result.data[2];
                    obfs3 = result.data[3];
                    obfs4 = result.data[4];
                    websocket = result.data[5];
                    fte = result.data[6];
                    meek = result.data[7];
                    scramblesuit = result.data[8];
                    snowflake = result.data[9];
                    defaultOP = result.data[10];
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("获取后台数据失败！");
            }
        });

        //指定图表的配置项和数据
        var option = {
            title: {
                text: '网桥混淆插件用户变化图'
            },
            tooltip: {},
            legend: {
                data: ['PT总用户', 'obfs2', 'obfs3', 'obfs4', 'websocket', 'fte', 'meek', 'scramblesuit', 'snowflake', 'defaultOP']
            },
            xAxis: {
                //结合
                data: date
            },

            yAxis: {},
            series: [{
                name: 'PT总用户',
                type: 'line',
                data: all_PT
            }, {
                name: 'obfs2',
                type: 'line',
                data: obfs2
            }, {
                name: 'obfs3',
                type: 'line',
                data: obfs3
            }, {
                name: 'obfs4',
                type: 'line',
                data: obfs4
            }, {
                name: 'websocket',
                type: 'line',
                data: websocket
            }, {
                name: 'fte',
                type: 'line',
                data: fte
            }, {
                name: 'meek',
                type: 'line',
                data: meek
            }, {
                name: 'scramblesuit',
                type: 'line',
                data: scramblesuit
            }, {
                name: 'snowflake',
                type: 'line',
                data: snowflake
            }, {
                name: 'defaultOP',
                type: 'line',
                data: defaultOP
            }],
            dataZoom: [
                {
                    type: 'inside',// 内置于坐标系中
                    xAxisIndex: [0]
                },
                {
                    type: 'slider',//有单独的滑动条，用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示
                    show: true,//是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
                    start: 0,//数据窗口范围的起始百分比0-100
                    end: 50,//数据窗口范围的结束百分比0-100
                    xAxisIndex: [0],// 此处表示控制第一个xAxis，设置 dataZoom-slider 组件控制的 x轴 可是已数组[0,2]表示控制第一，三个；xAxisIndex: 2 ，表示控制第二个。yAxisIndex属性同理
                    bottom: -10 //距离底部的距离
                }
            ],
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {
                        show: true,
                        excludeComponents: ['toolbox'],
                        pixelRatio: 2
                    }
                }
            }
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
</script>